<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Mr.Zhu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="" />
<!-- css files -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/cobox.css" rel="stylesheet" type="text/css">
<link href="css/portfolio.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
<link rel="stylesheet" href="css/new.css">

<!-- /css files -->
<!-- font links -->
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cinzel:400,700,900' rel='stylesheet' type='text/css'>
<!-- /font links -->	
<!-- js files -->
<script src="js/modernizr.custom.js"></script>
<!-- /js files -->
<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?9bc6665da066f951acd0a30224ad7ae9";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
		</script>		
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
 <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
			  <a class="navbar-brand" href="index.html">My Profile</a>
    		<video src="周杰伦 - 给我一首歌的时间.mp3" loop="loop" autoplay="autoplay" ></video>
            </div>
            <div id="navbar" class="navbar-collapse collapse navbar-right">
              <ul class="nav navbar-nav link-effect">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">项目</a></li>
				<li><a href="#gallery">画廊</a></li>
				<li><a href="#contact">联系我</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>
<!-- Banner -->
<div class="banner">
	<ul class="rslides" id="slider">
		<li>
			<div class="banner-info">
				<h3>Welcome to my homepage</h3>
				<span class="line1"></span>
				<p>微博 GitHub 码云</p>
				<span class="line2"></span>
				<div class="newbox">
					<a href="https://weibo.com/5043668035/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1" target="_block"><i class="iconfont icon-weibo1"></i></a>
					<div class="newicon">
						<a href="https://github.com/ZAGuang" target="_block"><i class="iconfont icon-GitHub"></i></a> 
						<a href="https://gitee.com/zhuauang/events" target="_block"><i class="iconfont icon-logo"></i></a> 
					</div>
				</div>
				
			</div>	
		</li>
	</ul>	
</div>
<!-- /Banner -->
<!-- About -->
<div class="about-me" id="about"> 
	<h3 class="text-center slideanim">个人信息</h3>
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-xs-12">
				<div class="mydetails slideanim text-center">
					<img class="img-circle img-responsive" src="images/aguang.jpg" alt="Generic placeholder image" width="200px" height="200px">
					<h3>Web前端工程师</h3>
					<p>姓名：朱曾光</p>
					<p>性别：男</p>
					<p>邮箱：zhuguanguang@qq.com</p>
					<div class="newbox">
						<a href="https://weibo.com/5043668035/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1" target="_block"><i class="iconfont icon-weibo1"></i></a>
						<div class="newicon">
							<a href="https://github.com/ZAGuang" target="_block"><i class="iconfont icon-GitHub"></i></a> 
							<a href="https://gitee.com/zhuauang/events" target="_block"><i class="iconfont icon-logo"></i></a> 
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8 col-xs-12">
				<div class="myskills slideanim">
					<h3 class="text-center">技能信息</h3>
					<!-- <p class="skill-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> -->
					<div class="skill-info"> 
						<div class="table-responsive">
							<table class="table">
								<tbody>
									<tr>
										<td><i class="iconfont icon-html5"></i></td>
										<td><h4>HTML5</h4><span class="longline1"></span><span class="shortline1"></span></td>
										<td><p>90%</p></td>
									</tr>
									<tr>
										<td><i class="iconfont icon-css3"></i></td>
										<td><h4>CSS3</h4><span class="longline1"></span><span class="shortline1"></span></td>
										<td><p>89%</p></td>
									</tr>
									<tr>
										<td><i class="iconfont icon-git"></i></td>
										<td><h4>Git命令管理工具</h4><span class="longline1"></span><span class="shortline1"></span></td>
										<td><p>89%</p></td>
									</tr>
									<tr>
										<td><i class="iconfont icon-nodejs"></i></td>
										<td><h4>Node.js</h4><span class="longline2"></span><span class="shortline2"></span></td>
										<td><p>50%</p></td>
									</tr>
									<tr>
										<td><i class="iconfont icon-javascript"></i></td>
										<td><h4>JaveScript</h4><span class="longline3"></span><span class="shortline3"></span></td>
										<td><p>95%</p></td>
									</tr>
									<tr>
										<td><i class="iconfont icon-vuejs"></i></td>
										<td><h4>Vue.js</h4><span class="longline4"></span><span class="shortline4"></span></td>
										<td><p>92%</p></td>
									</tr>
									<tr>
										<td><i class="iconfont icon-react"></i></td>
										<td><h4>React</h4><span class="longline5"></span><span class="shortline5"></span></td>
										<td><p>96%</p></td>
									</tr>
								</tbody>
							</table>
						</div>	
					</div>
				</div>	
			</div>
		</div>	
	</div>	
</div>

<!-- Portfolio -->
	<div class="myportfolio" id="portfolio">
		<h3 class="text-center slideanim">我的项目</h3>
		<p class="text-center slideanim">我最近的项目，只是“点击”一下，了解更多</p>
		<section class="vertical" id="grid3d">
				<div class="grid-wrap">
					<div class="grid">
						<figure><img class="slideanim" src="images/1.jpg" alt="img01"/></figure>
						<figure><img class="slideanim" src="images/2.jpg" alt="img05"/></figure>
						<figure><img class="slideanim" src="images/3.jpg" alt="img08"/></figure>
						<figure><img class="slideanim" src="images/4.jpg" alt="img02"/></figure>
						<figure><img class="slideanim" src="images/5.jpg" alt="img04"/></figure>
						<figure><img class="slideanim" src="images/6.jpg" alt="img03"/></figure>
						<figure><img class="slideanim" src="images/7.jpg" alt="img09"/></figure>
						<figure><img class="slideanim" src="images/8.jpg" alt="img06"/></figure>
						<figure><img class="slideanim" src="images/9.jpg" alt="img07"/></figure>
					</div>
				</div><!-- /grid-wrap -->
				<div class="content">
					<div>
						<div class="content-img"><img src="images/1-1.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Classy Coming Soon</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/2-2.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">404 Error Page</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/3-3.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Credit Card Validation</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/4-4.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Eshop Product Detail Widget</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/5-5.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Model Profile Widget</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/6-6.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Flat Under Construction</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/7-7.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Impressive Under Construction</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/8-8.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Profile Widget</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div>
						<div class="content-img"><img src="images/9-9.jpg" class="img-responsive" alt="my projects"></div>
						<h3 class="content-text">Travel Reservation Widget</h3>
						<p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<span class="loading"></span>
					<span class="icon close-content"></span>
				</div>
			</section>
		</div>	
<!-- /Portfolio -->
<!-- Gallery -->
<div class="mygallery" id="gallery">
	<h3 class="text-center slideanim">我们的画廊</h3>
	<div class="text-center"> 
		<a href="images/aguang.jpg" title="啊光"><img src="images/aguang.jpg" alt="example-1" class="img-responsive slideanim"></a> 
		<a href="images/xue.jpg" title="李梦雪"><img src="images/xue.jpg" alt="example-2" class="img-responsive slideanim"></a> 
		<a href="images/dan.jpg" title="范俊丹"><img src="images/dan.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/gang.jpg" title="刚哥"><img src="images/gang.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/biao.jpg" title="尹彪彪"><img src="images/biao.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/jian.jpg" title="建哥"><img src="images/jian.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/hao.jpg" title="王永豪"><img src="images/hao.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/hua.jpg" title="檀清华"><img src="images/hua.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/ke.jpg" title="申柯"><img src="images/ke.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/ran.jpg" title="程然"><img src="images/ran.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/bin.jpg" title="赵勃斌"><img src="images/bin.jpg" alt="example-3" class="img-responsive slideanim"></a>
		<a href="images/mannn.jpg" title="王曼"><img src="images/mannn.jpg" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/yangy.jpg" title="张志阳"><img src="images/yangy.jpg" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/dong.jpg" title="王晓东"><img src="images/dong.jpg" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/jin.jpg" title="许金豪"><img src="images/jin.jpg" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/long.jpg" title="张金龙"><img src="images/long.jpg" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/jun.jpg" title="段秉军"><img src="images/jun.jpg" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/bo.png" title="向博"><img src="images/bo.png" alt="example-3" class="img-responsive slideanim"></a>	
		<a href="images/xin.png" title="盖鑫鑫"><img src="images/xin.png" alt="example-3" class="img-responsive slideanim"></a>	
	</div>

</div>	
<!-- Gallery -->
<!-- footer -->	
<div class="contact-me" id="contact">
	<h3 class="text-center slideanim">联系方式</h3>
	<div class="container">
	<footer>
		<div class="row">
			<div class="col-md-6 slideanim">
				<div class="contact-details">
					<form action="#" method="post">
						<div class="row">
							<div class="col-sm-12 form-group">
								<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
							</div>
							<div class="col-sm-12 form-group">
								<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
							</div>
						</div>
						<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
						<div class="row">
							<div class="col-sm-12 form-group">
								<button class="btn btn-default btn-lg" type="submit">Send<span class="glyphicon glyphicon-menu-right"></span></button>
							</div>
						</div>
					</form>	
				</div>	
			</div>	
			<div class="col-md-6 slideanim">
				<div class="contact-info">
					<h4>联系信息</h4>
					<div class="footer-info">
						<div>	
							<i class="glyphicon glyphicon-globe"></i>
							<p class="p1">北京市</p> 
							<p class="p2">北京市</p>
						</div>
						<div>
							<i class="glyphicon glyphicon-phone-alt"></i>
							<p class="p1">+1 515 151515</p>
							<p class="p2">+00 1010101010</p>
						</div>
						<div>
							<i class="glyphicon glyphicon-envelope"></i>
							<p class="p1"><a href="1072941500@qq.com">107241500@.com</a></p> 
							<p class="p2"><a href="zhuguanguang@qqx`.com">1072941500@.com</a></p>
						</div>
					</div>
					<
				</div>
			</div>
		</div>
		<hr>
		<a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span></a>
		</footer>
	</div>
</div>
<!-- /footer -->	
	<!-- js files -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!-- js files for banner slider -->
	<script src="js/responsiveslides.min.js"></script>
	  <script>
    $(window).load(function() {

     // Slideshow for banner
      $("#slider").responsiveSlides({
        maxwidth: 1920,
        speed: 1000
      });


    });
  </script>
	<!-- /js files for banner slider -->
	<!-- js files for portfolio -->
		<script src="js/classie.js"></script>
		<script src="js/helper.js"></script>
		<script src="js/grid3d.js"></script>
		<script>
			new grid3D( document.getElementById( 'grid3d' ) );
		</script>
	<!-- /js files for portfolio -->
	<!-- js files for gallery -->
<script type="text/javascript" src="js/cobox.js"></script>
	<!-- /js files for gallery -->	
	<!-- js for smooth scrolling -->
	
		<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
})

</script>
	<!-- /js for smooth scrolling -->
	<!-- js for sliding -->
	
	<script>
	$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
</script>
	<!-- /js for sliding -->
	<!-- /js files -->
	
</body>
</html>	